<template>
  <Layout>
    <Header style="width: 100%; margin-top: -2%">
      <MyHeader />
    </Header>
    <Content>
      <div>
        <!-- 选择厂商与功能 -->
        <el-row :gutter="20">
          <el-col :span="18"
            ><div style="margin-bottom: 20px">
              <el-form class="selectStyle">
                <!-- 选择厂商 -->
                <el-form-item label="测试厂商:">
                  <el-select v-model="company" placeholder="请选择测试厂商">
                    <el-option
                      v-for="(item, index) in deviceUsersList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- 选择功能 -->
                <el-form-item label="接口选择:">
                  <!-- <span
                  style="
                    font: 25px bold;
                    color: rgba(239, 242, 245, 0.9);
                    margin-left: 30px;
                  "
                  >接口选择：</span
                > -->
                  <el-select
                    v-model="value"
                    placeholder="请选择"
                    style="width: 370px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form></div
          ></el-col>
          <!-- 注册厂商 -->
          <el-col :span="2">
            <el-button
              type="primary"
              size="small"
              @click="dialogVisible = !dialogVisible"
              >注册厂商</el-button
            >
            <el-dialog
              title="注册厂商"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <el-form
                v-model="registerUser"
                label-width="150px"
                label-position="left"
              >
                <el-form-item label="⼚商设备名:">
                  <el-input
                    v-model="registerUser.username"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="⽤户名:">
                  <el-input
                    v-model="registerUser.sywg_username"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="Ip:">
                  <el-input
                    v-model="registerUser.ip"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="Port:">
                  <el-input
                    v-model="registerUser.port"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="DeviceCode:">
                  <el-input
                    v-model="registerUser.deviceCode"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="ori_token:">
                  <el-input
                    v-model="registerUser.ori_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="cur_token:">
                  <el-input
                    v-model="registerUser.cur_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="私钥位置:">
                  <el-input
                    v-model="registerUser.key_pth"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitRegister"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-col>
          <!-- 修改厂商信息 -->
          <el-col :span="2">
            <el-button
              type="primary"
              size="small"
              @click="dialogVisibleChange = !dialogVisibleChange"
              >修改厂商信息</el-button
            >
            <el-dialog
              title="修改厂商信息"
              :visible.sync="dialogVisibleChange"
              width="30%"
            >
              <el-form label-width="150px" label-position="left">
                <el-form-item label="修改厂商:">
                  <el-select
                    v-model="changeCompany"
                    placeholder="请选择需修改的厂商"
                  >
                    <el-option
                      v-for="(item, index) in deviceUsersList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select> </el-form-item
              ></el-form>

              <el-form
                v-model="changeUser"
                label-width="150px"
                label-position="left"
              >
                <el-form-item label="⼚商设备名:">
                  <el-input
                    v-model="changeUser.username"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="⽤户名:">
                  <el-input
                    v-model="changeUser.sywg_username"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="Ip:">
                  <el-input
                    v-model="changeUser.ip"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="Port:">
                  <el-input
                    v-model="changeUser.port"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="DeviceCode:">
                  <el-input
                    v-model="changeUser.deviceCode"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="ori_token:">
                  <el-input
                    v-model="changeUser.ori_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="cur_token:">
                  <el-input
                    v-model="changeUser.cur_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="私钥位置:">
                  <el-input
                    v-model="changeUser.key_pth"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitChange"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-col>
          <!-- 配置平台信息 -->
          <el-col :span="2">
            <el-button type="primary" size="small" @click="getPlatformInfo"
              >配置平台信息</el-button
            >
            <el-dialog
              title="配置平台信息"
              :visible.sync="dialogVisiblePlatform"
              width="30%"
            >
              <el-form
                v-model="platformInfo"
                label-width="150px"
                label-position="left"
              >
                <el-form-item label="Ip:">
                  <el-input
                    v-model="platformInfo.ip"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="Port:">
                  <el-input
                    v-model="platformInfo.port"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="cur_token:">
                  <el-input
                    v-model="platformInfo.cur_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="DeviceCode:">
                  <el-input
                    v-model="platformInfo.deviceCode"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="ori_token:">
                  <el-input
                    v-model="platformInfo.ori_token"
                    style="width: 470px"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitChangePlatformInfo"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-col>
        </el-row>

        <!-- 具体功能和发送接收消息 -->
        <el-row :gutter="0">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div>
                <div v-if="value == 'opt1'">
                  <jian-quan :queryType="5" :company="company"></jian-quan>
                </div>
                <!-- <div
                  v-if="value == 'opt1'"
                  style="overflow: auto;overflow-x:hidden;"
                >
                  <video-info-update :queryType="8"></video-info-update>
                </div> -->
                <div
                  v-if="value == 'opt2'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="1"
                    :company="company"
                  ></video-info-update>
                </div>
                <div
                  v-if="value == 'opt3'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="2"
                    :company="company"
                  ></video-info-update>
                </div>
                <div
                  v-if="value == 'opt4'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="3"
                    :company="company"
                  ></video-info-update>
                </div>
                <div
                  v-if="value == 'opt5'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="4"
                    :company="company"
                  ></video-info-update>
                </div>
                <div
                  v-if="value == 'opt6'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="12"
                    :company="company"
                  ></video-info-update>
                </div>
                <div
                  v-if="value == 'opt7'"
                  style="overflow: auto; overflow-x: hidden"
                >
                  <video-info-update
                    :queryType="11"
                    :company="company"
                  ></video-info-update>
                </div>
                <div v-if="value == 'opt8'">
                  <video-trans-begin
                    :queryType="6"
                    :company="company"
                  ></video-trans-begin>
                </div>
                <div v-if="value == 'opt9'">
                  <video-trans-finish
                    :queryType="7"
                    :company="company"
                  ></video-trans-finish>
                </div>
                <div v-if="value == 'opt10'">
                  <ptz-control :queryType="8" :company="company"></ptz-control>
                </div>
              </div></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple" v-loading="this.loading">
              <text-box></text-box></div
          ></el-col>
        </el-row>
      </div>
    </Content>
  </Layout>
</template>

<script>
import MyHeader from "./Header.vue";
import VideoTransBegin from "./optionForm/videoTransBegin";
import VideoTransFinish from "./optionForm/videoTransFinish";
import VideoInfoUpdate from "./optionForm/videoInfoUpdate";
import PtzControl from "./optionForm/ptzControl";
import JianQuan from "./optionForm/jianQuan";
// import SnapShot from "./optionForm/snapShot";
import TextBox from "./textBox";

import {
  reqRegistDeviceUsers,
  reqDeviceUsersInfo,
  reqPlatformInfo,
  reqChangePlatformInfo,
} from "@/api";
import { mapState, mapActions } from "vuex";

export default {
  components: {
    MyHeader,
    VideoTransBegin,
    VideoTransFinish,
    VideoInfoUpdate,
    PtzControl,
    JianQuan,
    // SnapShot,
    TextBox,
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisibleChange: false,
      dialogVisiblePlatform: false,
      registerUser: {
        //注册厂商信息
        username: "",
        sywg_username: "",
        ip: "",
        port: "",
        deviceCode: "",
        ori_token: "",
        cur_token: "",
        key_pth: "",
      },
      changeUser: {
        //需修改的厂商信息
        username: "",
        sywg_username: "",
        ip: "",
        port: "",
        deviceCode: "",
        ori_token: "",
        cur_token: "",
        key_pth: "",
      },
      platformInfo: {
        //平台配置
        ip: "",
        port: "",
        cur_token: "",
        deviceCode: "",
        ori_token: "",
      },
      company: "",
      changeCompany: "",

      options: [
        {
          value: "opt1",
          label: "鉴权测试",
        },
        {
          value: "opt2",
          label: "摄像机信息注册/修改接口",
        },
        {
          value: "opt3",
          label: "摄像机信息删除接口",
        },
        {
          value: "opt4",
          label: "上报摄像机状态接口",
        },
        {
          value: "opt5",
          label: "上报图像质量检测接口",
        },
        {
          value: "opt6",
          label: "视频截图上报接口",
        },
        {
          value: "opt7",
          label: "智能分析上报接口",
        },
        {
          value: "opt8",
          label: "视频推送开始接口",
        },
        {
          value: "opt9",
          label: "视频推送停止接口",
        },
        {
          value: "opt10",
          label: "云台控制接口",
        },
      ],
      value: "",
    };
  },

  computed: {
    ...mapState(["deviceUsersList", "sendInParams", "sendOutParams"]),
  },

  mounted() {
    this.getCamNum(this.company);
    this.getToken();
    this.getDeviceUsers();
  },

  watch: {
    changeCompany: {
      handler(val) {
        this.getDeviceUsersInfo(val);
      },
    },
    company: {
      handler(val) {
        this.getCamNum(val);
      },
    },
    sendInParams: {
      handler(val) {
        this.loading = true;
      },
    },
    sendOutParams: {
      handler(val) {
        this.loading = false;
      },
    },
  },

  methods: {
    ...mapActions(["getCameraNum", "getTokenNum", "getDeviceUsers"]),

    getCamNum(companyName) {
      let param = { username: companyName };
      this.getCameraNum(param);
    },

    getToken() {
      this.getTokenNum();
    },

    //注册厂商
    async submitRegister() {
      this.dialogVisible = false;

      let registerParams = {
        username: this.registerUser.username,
        sywg_username: this.registerUser.sywg_username,
        ip: this.registerUser.ip,
        port: this.registerUser.port,
        deviceCode: this.registerUser.deviceCode,
        ori_token: this.registerUser.ori_token,
        cur_token: this.registerUser.cur_token,
        key_pth: this.registerUser.key_pth,
      };
      let resData = await reqRegistDeviceUsers(registerParams);
      if (resData.code === 200) {
        this.$message({
          message: resData.msg,
          type: "success",
        });
        this.getDeviceUsers(); //重新获取厂商列表
      }
    },

    //修改厂商信息
    async submitChange() {
      this.dialogVisibleChange = false;

      let changeParams = {
        username: this.changeUser.username,
        sywg_username: this.changeUser.sywg_username,
        ip: this.changeUser.ip,
        port: this.changeUser.port,
        deviceCode: this.changeUser.deviceCode,
        ori_token: this.changeUser.ori_token,
        cur_token: this.changeUser.cur_token,
        key_pth: this.changeUser.key_pth,
      };
      let resData = await reqRegistDeviceUsers(changeParams);
      if (resData.code === 200) {
        this.$message({
          message: resData.msg,
          type: "success",
        });
        this.getDeviceUsers(); //重新获取厂商列表
      }
    },

    //修改平台配置信息
    async submitChangePlatformInfo() {
      this.dialogVisiblePlatform = false;

      let changeParams = {
        ip: this.platformInfo.ip,
        port: this.platformInfo.port,
        cur_token: this.platformInfo.cur_token,
        deviceCode: this.platformInfo.deviceCode,
        ori_token: this.platformInfo.ori_token,
      };
      let resData = await reqChangePlatformInfo(changeParams);
      if (resData.code === 200)
        this.$message({
          message: resData.msg,
          type: "success",
        });
    },

    //获取厂商信息
    async getDeviceUsersInfo(companyName) {
      let param = { username: companyName };
      let resData = await reqDeviceUsersInfo(param);
      this.changeUser.username = resData.username;
      this.changeUser.sywg_username = resData.sywg_username;
      this.changeUser.ip = resData.ip;
      this.changeUser.port = resData.port;
      this.changeUser.deviceCode = resData.deviceCode;
      this.changeUser.ori_token = resData.ori_token;
      this.changeUser.key_pth = resData.key_pth;
      this.changeUser.cur_token = resData.cur_token;
    },

    async getPlatformInfo() {
      let resData = await reqPlatformInfo({});
      this.platformInfo.ip = resData.ip;
      this.platformInfo.port = resData.port;
      this.platformInfo.cur_token = resData.cur_token;
      this.platformInfo.deviceCode = resData.deviceCode;
      this.platformInfo.ori_token = resData.ori_token;

      this.dialogVisiblePlatform = true;
    },
  },
};
</script>

<style>
legend {
  font-weight: 800;
  font-size: 19px !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
  background: rgba(211, 220, 230, 0.8);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  /* height: auto !important; */
  height: 890px !important;
  min-height: 890px !important;
  border-radius: 4px;
  min-height: 36px;
  margin-left: 20px;
  margin-right: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-select-dropdown__item {
  font-size: 20px !important;
}
.el-form-item__label {
  color: #0d285d !important;
  font-size: 20px !important;
}
.selectStyle .el-form-item__label {
  color: #fff !important;
  margin-left: 30px;
}
.el-input__inner {
  font-size: 20px !important;
}
.el-button {
  color: #0d285d !important;
  font-weight: bold !important;
  font-size: 19px !important;
}
.el-row {
  margin-bottom: 10px;
}
.el-card__body {
  padding-top: 0px !important;
}
.el-card__header {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
/* 修改placeholder字体颜色 */
input::-webkit-input-placeholder {
  /*WebKit browsers*/
  color: rgb(128, 123, 123) !important;
}

input::-moz-input-placeholder {
  /*Mozilla Firefox*/
  color: rgb(128, 123, 123) !important;
}

input::-ms-input-placeholder {
  /*Internet Explorer*/
  color: rgb(128, 123, 123) !important;
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.4) !important;
}
</style>
